<template>
  <div>
    <div :id="id"
         :class='["m-map", {fixed: fixed}]'
         :style="{width:width+'px',height:height+'px',margin:'34px auto' }" ref='map'></div>
    <transition name="fade">
      <div class="model"
           v-show='show'
           @click="show = false">
        <div :id='"max-"+id'
             class="fixed-map"
             :style="{width:mapWidth+'px',height:mapHeight+'px'}">

        </div>
      </div>
    </transition>
  </div>
</template>
 
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
declare var window: any;
declare var AMap: any;
@Component({
  props: {
    id: {
      type: String,
      default: "map"
    },
    // 点标记
    // markerList: {
    //   type: Array,
    //   default() {
    //     return [{
    //       name: '天安门',
    //       location: [116.39, 39.9],
    //       add: '北京'
    //     }]
    //   }
    // },
    width: Number,
    height: Number,
    fixed: Boolean
  }
})
export default class Map extends Vue {
  // 高德地图 key
  key: string = "12ef08e92a0ce0963b4698a73de243bc";
  map: any = null;
  mapWidth: number = 0;
  mapHeight: number = 0;
  show: boolean = false;
  @Prop({
    type: Array,
    default() {
      return [
        {
          name: "天安门",
          location: [116.39, 39.9],
          add: "北京"
        }
      ];
    }
  })
  markerList: any[];

  mounted() {
    let that: any = this;
    window.onMapLoad = () => {
      // that.map = new AMap.Map(that.id, {
      //   resizeEnable: true,
      //   zoom: 11,
      //   center: that.markerList[0].location
      // });
      // AMap.plugin(
      //   [
      //     "AMap.ToolBar",
      //     "AMap.Scale",
      //     "AMap.OverView",
      //     "AMap.MapType",
      //     "AMap.Geolocation"
      //   ],
      //   function() {
      //     // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      //     that.map.addControl(new AMap.ToolBar());

      //     // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      //     // map.addControl(new AMap.Scale());

      //     // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      //     // map.addControl(new AMap.OverView({ isOpen: true }));

      //     // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      //     // map.addControl(new AMap.MapType());

      //     // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      //     that.map.addControl(new AMap.Geolocation());
      //   }
      // );
      // that.addMarker();

      // mini
      that.mapInit()
      // normal
      that.mapInit(`max-${that.id}`,`max-${that.id}`)

      // let marker = new AMap.Marker({
      //   icon:
      //     "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
      //   position: that.map.getCenter(),
      //   offset: new AMap.Pixel(-13, -30)
      // });
      // marker.setLabel({
      //   offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
      //   content: "<div class='info'>1</div>", //设置文本标注内容
      //   direction: "center" //设置文本标注方位
      // });
      // that.add(marker);
    };
    var url = `https://webapi.amap.com/maps?v=1.4.14&key=${
      this.key
    }&callback=onMapLoad`;
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  }
  mapInit(id = 'map',name = 'map') {
    let that: any = this;
    that[name] = new AMap.Map(id, {
      resizeEnable: true,
      zoom: 11,
      center: that.markerList[0].location
    });
    AMap.plugin(
      [
        "AMap.ToolBar",
        "AMap.Scale",
        "AMap.OverView",
        "AMap.MapType",
        "AMap.Geolocation"
      ],
      function() {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        that[name].addControl(new AMap.ToolBar());

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        // map.addControl(new AMap.Scale());

        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        // map.addControl(new AMap.OverView({ isOpen: true }));

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        // map.addControl(new AMap.MapType());

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        that[name].addControl(new AMap.Geolocation());
      }
    );
    that.addMarker(name);
    // mini打开大的
    if(name='map') {
      that[name].on('click', (e) => {
        that.mapWidth = (window.innerWidth / 2) > 1100 ? (window.innerWidth / 2) : 1100
        that.mapHeight = window.innerHeight * 0.85
        that.show = true
      })
    }
  }
  addMarker(name = 'map') {
    let map = this[name];
    this.markerList.forEach((item, index) => {
      // 点标记
      let marker = new AMap.Marker({
        icon:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        position: item.location,
        offset: new AMap.Pixel(-13, -30)
      });
      // 设置鼠标划过点标记显示的文字提示
      marker.setTitle(item.add);

      // 设置label标签
      marker.setLabel({
        offset: new AMap.Pixel(0, -5), //设置文本标注偏移量
        content: `<div class='info'>${index + 1}</div>`, //设置文本标注内容
        direction: "center" //设置文本标注方位
      });
      // 设置点击事件
      marker.on("click", function(e) {
        // 阻止冒泡
        e.stopPropagation ? e.stopPropagation() : 
        e.cancelBubble = true

        // 纯文本标记
        let label = new AMap.Text({
          offset: new AMap.Pixel(0, -30),
          text: item.name,
          anchor: "top", // 设置文本标记锚点
          draggable: true,
          cursor: "pointer",
          angle: 0,
          style: {
            padding: ".25rem .75rem",
            "margin-bottom": "1rem",
            "border-radius": ".25rem",
            "background-color": "white",
            "border-width": 0,
            "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
            "text-align": "center",
            "font-size": "14px"
            // color: "blue"
          },
          position: item.location
        });
        map.add(label);
      });
      map.add(marker);
    });
  }
}
</script>
<style lang='scss'>
.amap-icon img {
  width: 25px;
  height: 34px;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}

.info {
  position: relative;
  top: 0;
  right: 0;
  min-width: 0;
  border-radius: 50%;
  background-color: transparent;
  color: #fff;
}
.info_text {
  position: relative;
  top: 0;
  right: 0;
  min-width: 0;
  background: #fff;
  box-shadow: 1px 1px 5px #999;
}
.model {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  .fixed-map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%, 0);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.fixed {
  position: fixed !important;
  top: 0;
  overflow: hidden;
  margin: 0 10px !important;
}
</style>